<template>
  <div class>
    <van-swipe
      :touchable="true"
      :autoplay="floors.photos.length > 1 ? 5000 : 0"
      :height="floors.height"
      @change="onChange"
    >
      <van-swipe-item v-for="(image, index) in floors.photos" :key="index">
        <div
          class="needsclick"
          style="height:100%;width:100%;font-size: 0;display: inline-block;"
          @click="jumpPage(image)"
        >
          <!-- <img :src="$imgUrlHead + image.path" class="needsclick" /> -->
					 <legend-image :pic="image.path" :options="{w: '375',h: floors.height}"  />
        </div>
      </van-swipe-item>

      <ul
        class="custom-indicator slide clearfix"
        slot="indicator"
        :class="{ block: floors.markStyle == 'block' }"
      >
        <template v-if="floors.markStyle == 'point'">
          <li v-for="(item, index) in floors.photos" :key="index" :class="{ on: current == index }"></li>
        </template>

        <template v-if="floors.markStyle == 'block'">
          <li v-for="(item, index) in floors.photos" :key="index" :class="{ on: current == index }"></li>
        </template>
      </ul>
    </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import jumpMixin from "mixin/jumpMixin.js"
import legendImage from 'components/legendImage/legendImage'
export default {
  props: {
    floors: Object
  },
	components: {
		legendImage
	},
  mixins: [jumpMixin],
  data() {
    return {
      current: 0
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
};
</script>
<style scoped>
/* banner */
.index .banner {
  position: relative;
  z-index: 1;
  margin: 0;
}

.index .banner .img li {
  width: 100%;
  visibility: visible;
  float: left;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

.index .banner .img li a,
.index .banner .img li a img {
  display: block;
  height: 100%;
  width: 100%;
}

.index .banner .slide {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  height: 7px;
}

.index .banner .slide li {
  font-size: 0;
  display: inline-block;
  height: 5px;
  width: 5px;
  border: 1px solid #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin: 0 2px;
  vertical-align: top;
  cursor: pointer;
  background: #fff;
}

.index .banner .slide.block li {
  height: 2px;
  width: 8px;
  border: none;
  border-radius: none;
}

.index .banner .slide.block li.on {
  width: 12px;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
  font-size: 0;
  display: inline-block;
}

.van-swipe__indicators {
  bottom: 25px !important;
}

.van-swipe__indicators .van-swipe__indicator {
  width: 8px !important;
  height: 8px !important;
}

.green .index .banner .slide .on {
  background: #4eae31;
  border-color: #4eae31;
}

.green .index .banner .slide.block .on {
  background: #4eae31 !important;
}

.red .index .banner .slide .on {
  background: #e5004f;
  border-color: #e5004f;
}

.red .index .banner .slide.block .on {
  background: #e5004f !important;
}

.crimson .index .banner .slide .on {
  background: #de0233;
  border-color: #de0233;
}

.crimson .index .banner .slide.block .on {
  background: #de0233 !important;
}

.pale-red .index .banner .slide .on {
  background: #fd8cb0;
  border-color: #fd8cb0;
}

.pale-red .index .banner .slide.block .on {
  background: #fd8cb0 !important;
}

.orange .index .banner .slide .on {
  background: #ff6700;
  border-color: #ff6700;
}

.orange .index .banner .slide.block .on {
  background: #ff6700 !important;
}

.brown .index .banner .slide .on {
  background: #bc9f5f;
  border-color: #bc9f5f;
}

.brown .index .banner .slide.block .on {
  background: #bc9f5f !important;
}

.blue .index .banner .slide .on {
  background: #2e82e3;
  border-color: #2e82e3;
}

.blue .index .banner .slide.block .on {
  background: #2e82e3 !important;
}

.light-green .index .banner .slide .on {
  background: #5fc221;
  border-color: #5fc221;
}

.light-green .index .banner .slide.block .on {
  background: #5fc221 !important;
}

.black .index .banner .slide .on {
  background: #333333;
  border-color: #333333;
}

.black .index .banner .slide.block .on {
  background: #333333 !important;
}
</style>
